<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>西瓜用户首页</title>
<link type="text/css" href="css/user_home_order.css" rel="stylesheet" />
<link type="text/css" href="css/common.css" rel="stylesheet" />
<link type="text/css" href="css/reset.css" rel="stylesheet" />
<link type="text/css" href="css/esc.css" rel="stylesheet" />
<link type="text/css" href="theme-chalk/index.css" rel="stylesheet" />

    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script><!--必须得放在第一的位置-->
    <script type="text/javascript" src="js/user_home_order.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/esc.js"></script>
    <script src="js/element-ui-index.js"></script>
</head>

<body>
<div id="app">
<div class="index">
  <myframe>
  <div class="user_content f_f width_1200_center">
    <div class="content_position">您当前的位置：<a href="javascript:">首页</a><span>&gt;</span><a href="javascript:">用户主页</a></div>
   	<div class="hr_10"></div>
    <div class="user_content_con over_hidden width_1200_center"><!--over_hidden也是清除浮动的一种-->
      <div class="user_content_con_nav fl">
          <div class="nav_info">
              <h1>个人信息</h1>
              <ul>
                  <li><div class=""><a :href="'user_home.html?uid='+user.uid">个人资料</a></div></li>
                  <li><a :href="'user_home_info.html?uid='+user.uid">修改个人资料</a></li>
                  <li><a href="user_home_address.html">收货地址</a></li>
              </ul>
          </div>
          <div class="nav_goods">
              <h1>商品管理</h1>
              <ul>
                  <li><div class="djbs"> <a href="user_home_order.html">我的订单</a></div></li>
                  <li><a href="user_home_favorite.html">我的收藏</a></li>
                  <li><a href="user_home_cart.html">我的购物车</a></li>
                  <li><a href="#">卖车中心</a></li>
              </ul>
          </div>
          <div class="nav_comments_opinion">
              <h1>评论意见</h1>
              <ul>
                  <li><a href="user_home_comment.html">我的评论</a></li>
                  <li><a href="user_home_idea.html">我的意见</a></li>
                  <li><a href="user_home_message.html">西瓜消息</a></li>
              </ul>
          </div>
      </div>
      <div class="user_content_con_c fr">
     	<div class="content_goods_order f_f width_1000_center">
          <div class="content_goods_order_top over_hidden width_1000_center">
            <div class="top_order1 fl"><h1>我的订单</h1></div>
            <div  class="top_order2 fl"><h1>待付款</h1></div>
            <div class="top_order3 fl"><h1>待发货</h1></div>
            <div class="top_order4 fl"><h1>待收货</h1></div>
            <div class="top_order5 fl"><h1>待评价</h1></div>
            <div class="top_all fr"><span class="span1">西瓜店-全部订单</span><span class="span2">{{orders.length}}</span></div>
          </div>
          <div class="content_goods_order_con width_1000_center clearfix">
            <div class="content_goods_order_con_top">
              <div class="con_check fl"><input class="check_all" type="checkbox" id="con_check1"/><span><label for="con_check1">全选</label></span></div>
              <div class="con_goods fl">商品</div>
              <div class="con_action fr">操作</div>
              <div class="con_state fr">状态</div>
              <div class="con_pricea fr">实付（元）</div>
              <div class="con_num fr">数量</div>
              <div class="con_priceb fr">单价（元）</div>
            </div>
            <div class="hr_5"></div>
            <div class="content_goods_message_con_check check_re_con_fal"><input class="check_revsern" name="check_revsern" type="checkbox" id="con_check2"/><span><label for="con_check2">反选</label></span><a href="javascript:void(0)">批量确认收货</a><a href="javascript:void(0)">批量删除</a></div>

              <div v-for="o,i in orders">
             <div class="content_goods_order_con_con_">
               <div class="content_goods_order_con_c_top"><!--必须加label，不然不在同一行-->
                 <div class="con_check1 fl"><input name="items" value="<?=$i?>" class="check_one" type="checkbox" /><span><label for="con_check1">&nbsp;</label></span></div>
                 <div class="con_number fl">订单编号：<span class="span1">{{o.poid}}</span></div>
                 <div class="con_time fl">生成时间：<span class="span1">{{o.time}}</span></div>
                 <div type="text" @click.prevent="op(i)"><div class="con_delete fr" ><a href="">删除</a></div></div>
               </div>
               <div class="content_goods_order_con_con ">
                 <div class="con_goods1 fl clearfix">
                   <div class="pic fl"><img :src="o.carMes.image" width="110" height="80"/></div>
                   <div class="details fl"><a href="javascript:void(0)">{{o.carMes.carName}}<span class="">{{o.carMes.date}}上牌</span><em class="shuxian">|</em>{{o.carMes.traveled}}万公里</a></div>
                 </div>
                 <div class="con_action1 fr">
                   <div class="put_goods"><a href="javascript:void(0)">确认收货</a></div>
                   <div class="return"><a href="javascript:void(0)">退款-退货</a></div>
                 </div>
                 <div class="con_state1 fr">{{o.state}}</div>
                 <div class="con_pricea1 fr">
                   <p class="p1">￥<span class="span1">{{o.price}}元</span></p>
                   <p class="p2">含运费:(￥<span class="span1">0.00元</span>)</p>
                 </div>
                 <div class="con_num1 fr">1</div>
                 <div class="con_priceb1 fr">￥{{o.price}}元</div>
               </div>
             </div>
              </div>
             <div class="hr_10"></div>


          </div>
        </div>
      </div><!--右侧我的订单完-->
    </div><!--左右侧完-->
    <!--以后复制的开始-->
    <div class="hr_10"></div>
    <div class="buy_content_li width_1200_center">
      <div class="buy_content_li_top clearfix">
        <div class="buy_content_li_top_default fl"><a href="#">西瓜推荐</a></div>
        <div class="buy_content_li_top_num fr"><a href="#">共12辆车</a></div>
      </div>
      <div class="hr_5"></div>
      <div class="buy_content_li_list over_hidden clearfix">

          <div v-for="c in cars">
              <div class="index_content_con_margin_l"><!--只用来向右移动的，这样才不会有一个因为父级宽度不够出现在下方-->
                  <div class="index_content_con_c'+i+' index_content_con_c width_h_292_276 over_hidden fl"><!--只用来设置内边距--><!--用来设置外右边距-->
                      <div class="index_content_con_cc width_h_292_276">
                          <div class="index_content_con_pic width_h_292_186">
                              <a :href="'buy_details.html?carId='+c.carId"><img :src="c.image" width="292" height="186" /></a>
                          </div>
                          <div class="index_content_con_txt width_h_292_90">
                              <p class="p1">
                                  <a title="" href="#">{{c.carName}}</a>
                              </p>
                              <p class="p2">
                                  <span class="">{{c.date}}上牌</span><em class="shuxian">|</em>行驶{{c.traveled}}万公里
                              </p>
                              <p class="p3">
                                  <span><i class="fc-org priType">{{c.oldPrice}}万</i></span><s>{{c.newPrice}}万</s>
                              </p>
                          </div>
                      </div>
                  </div>
              </div>
          </div>

      </script>
      </div><!--遍历内容部分完-->
    </div><!--整个遍历内容部分完-->
    <!--以后复制的结束-->
  </div><!--整个内容部分-->






  <div class="hr_8"></div>
  </myframe>
</div>
</div>

<script>
    var v = new Vue({
        el : "#app",
        data : {
            user : [],
            cars : [],
            orders : []
        },
        created(){
            this.getLoginedUser();
            this.queryCar();

        },
        methods:{
            //获取用户信息
            getLoginedUser() {
                axios.get("/esc-user/getLoginedUser").then(res => {
                    if (res.data.code) {
                        this.user = res.data.data;
                        this.queryOrder();
                    }
                })
            },
            queryCar(){
                axios.get("/esc-order/esc/carMessage/queryCar").then(res=>{
                    this.cars = res.data;
                    var reg = /upload/
                    for(var a of  this.cars ){
                        if (a.image.match(reg)){
                            a.image = "/esc-user" + a.image;
                        }
                    }
                })
            },
            queryOrder(){
                axios.get("/esc-order/esc/payOrder/queryOrder?uid=" + this.user.uid).then(res=>{
                    this.orders = res.data.data;
                })
            },
            shanchu(i){
                axios.get("/esc-order/esc/payOrder/delOrder?poid=" + this.orders[i].poid).then(res=>{
                    this.orders = res.data.data;
                    this.queryOrder();
                })
            },
            op(i) {
                this.$confirm('是否要将该订单从列表中删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.shanchu(i)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    })
</script>
</body>
</html>